<template>
<div>
  <Scroll :on-reach-bottom="handleReachBottom" loading-text="正在加载中" height="500">
  <List item-layout="vertical">
    <ListItem v-for="item in data" :key="item.id">
      <ListItemMeta :avatar="item.headImage" :title="item.userName" :description="item.addTime"/>
      <i @click="detail(item.id)" v-html="ToText(item.context).substr(0,80)"></i>
      <template slot="action">
        <li>
          <i v-if="item.collection==false" class="el-icon-star-off" size="mini" @click="collection(item)"></i>
          <i v-if="item.collection==true" class="el-icon-star-on" size="mini" @click="collection(item)"></i>
          {{item.collectionNum}}
        </li>
        <li>
          <Icon type="md-heart-outline" v-if="item.love==false" @click="love(item)"/>
          <Icon type="md-heart" v-if="item.love==true" @click="love(item)"/>
          {{item.loveNum}}
        </li>
        <li>
          <Icon type="ios-chatbubbles-outline" /> {{item.commentNum}}
        </li>
      </template>
      <template slot="extra" v-if="item.topImage != null">
        <img :src="item.topImage" style="width: 280px;height: 140px">
      </template>
    </ListItem>
  </List>
    <div style="text-align: right; position: fixed; right: 0; bottom: 0">
      <el-input
        placeholder="请输入内容"
        v-model="input"
        v-if="find"
        @keyup.enter.native="search"
        clearable>
      </el-input>
      <el-button icon="el-icon-search" @click="find=!find" size="medium" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" size="medium" circle @click="addLifeShare"></el-button>
      <el-button icon="el-icon-caret-top" @click="backTop" size="medium" circle></el-button>
    </div>
  </Scroll>
  <AddLifeShare ref="addLifeShare" @ok="handleOk"></AddLifeShare>
  <DetailLifeShare ref="detailLifeShare"></DetailLifeShare>

</div>
</template>

<script>
import AddLifeShare from "@/components/lifesquare/addLifeShare";
import DetailLifeShare from "@/components/lifesquare/detailLifeShare";
import PersonLifeShare from "@/components/lifesquare/personLifeShare";
import {addCollectionLove, getCollectionLove, queryAllLivingShare} from "@/api/liveShare";
import {sendMatomo} from "@/api/matomo";

export default {
  name: "lifeShare",
  components: {PersonLifeShare, AddLifeShare,DetailLifeShare},
  data () {
    return {
      find: false,
      input: '',
      data: [],
      data2: [],
      page: 0,
      size: 5
    }
  },
  created() {
    this.getAllLivingShare(0,5)
  },
  methods: {
    async getAllLivingShare(page,size) {
      await queryAllLivingShare(page,size,this.input).then(res => {
        this.data2 = res.body.data
      })
      if (size == 1) {
        this.data.unshift(this.data2[0])
      } else {
        for (let i=0;i<this.data2.length;i++) {
          this.data.push(this.data2[i])
        }
      }

    },
    handleReachBottom () {
        return new Promise(resolve => {
          setTimeout(() => {
            this.page = this.page + 1
            this.getAllLivingShare(this.page, this.size)
          }, 20);
        });
    },
    backTop() {
      this.data= []
    },
    async collection(item) {
      await addCollectionLove(item.id, 2).then(res => {
        if (res.body.data) {
          item.collection = !item.collection
        }
      })
      getCollectionLove(item.id, 2).then(res => {
        item.collectionNum = res.body.data
      })
    },
    ToText(HTML) {
      var input = HTML;
      input = input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ').replaceAll("<img[^>]*/>", " ");
      return input
    },
    async love(item) {
      await addCollectionLove(item.id, 1).then(res => {
        item.love = !item.love
      })
      getCollectionLove(item.id, 1).then(res => {
        item.loveNum = res.body.data
      })
    },
    addLifeShare() {
      sendMatomo(2,'生活分享', '添加', '添加分享')
      this.$refs.addLifeShare.add()
    },
    detail(id) {
      sendMatomo(3,'生活分享', '查询', '查询详细,分享id:'+id)
      this.$refs.detailLifeShare.add(id)
    },
    personLife() {
      this.$refs.personLifeShare.add()
    },
    handleOk() {
      this.page = 0
      this.getAllLivingShare(0,1)
    },
    search() {
      this.page = 0
      this.data = []
      this.data2 = []
      this.getAllLivingShare(0,3)
      this.evecSeach()
    },
    evecSeach() {
      if (this.input != '' && this.input != null)
        sendMatomo(1,'生活分享', '查询', '输入'+this.input+'查询')
    }
  }
}
</script>

<style scoped>
</style>
